<template>
	<div class="policy-container">
    <div class="policy-title">
      <img class="bg-policy" :src="bannerImg" alt="bg_policy">
      <div class="title">政策资讯</div>
    </div>
    <div class="list-container">
      <div class="policy-content" >
        <div class="tab">
          <div class="tab-child" :class="policyType === 2 ? 'tab-active' : ''" @click="changeTab(2)">升学资讯</div>
          <div class="tab-child" :class="policyType === 1 ? 'tab-active' : ''" @click="changeTab(1)">政策解读</div>
        </div>
        <div class="list-section">
          <div class="policy-list">
            <div class="list-item" v-for="(item,index) in policys" :key="item.id">
              <div>
                <img v-if="item.imagePath" class="article-cover" :src="item.imagePath" alt="bg_policy">
                <img v-else class="article-cover" src="~@/img/fw1.png" alt="bg_policy">
              </div>
              <div class="article-content" >
                <p class="title" @click="goDetails(item)" @mouseover='over(index)' :class="{blue:index==mainIndex}">
                  {{item.title}}
                </p>
                <div class="desc" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;" >{{item.content}}</div>
                <p class="time">
                  <span>
                    <i class="el-icon-view"></i>  {{item.readCount}}
                  </span>
                  <span class="m-l-20">
                    <i class="el-icon-time"></i>  {{item.updateDate}}
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="more-list">
        <div class="tab" >
          <div class="tab-child" >
            <i class="el-icon-s-order more-icon" ></i>更多关注
          </div>
        </div>
        <div class="more-content">
          <div class="more-item" v-for="(item,index) in moreList" :key="item.id">
            <p class="more-item-title" @click="goDetails(item)" @mouseover='over(index)' :class="{blue:index==mainIndex}">{{item.title}}</p>
            <p class="time m-l-10">
              <span>
                <i class="el-icon-view"></i>  {{item.readCount}}
            </span>
            </p>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
import { request } from "@/util/request"

export default {
  data() {
    return {
      policys: [],
      mainIndex: -1,
      policyType: 2,  // 1:政策解读2:升学咨询
      moreList: [],
      bannerImg: ''
    }
  },
  created() {
    this.getzc()
    this.getMoreArticleFn()
    this.getBannerFn()
  },
  methods: {
    changeTab (type) {
      if (type === this.policyType) {
        return
      }
      this.policyType = type
      this.getzc()
    },
    over: function(index) {
      this.mainIndex = index;
    },
    getzc () {
      request({
        method: 'get',
        url: 'articleInfo/getzc',
        params: {
          type: this.policyType,
          pageNum: 1,
          pageSize: 999999,
        }
      }).then(res => {
        let regx = /<[^>]+>|&[^>]+;/g;
        this.policys = res.data.list
        this.policys.forEach(i => {
          i.contentAll = i.content
          i.content = i.content.replaceAll(regx,'');
          i.updateDate = i.updateDate.slice(0, 10)
        })

      })
    },
    goDetails(row) {
      const infos = row;
      localStorage.setItem('infos', JSON.stringify(infos))
      this.$router.push({
        path: "/details",
        params: {
          info: infos
        }
      })
    },
    // 更多关注
    getMoreArticleFn () {
      request({
        method: 'get',
        url: 'articleInfo/getFollow',
        params: {
          type: 3,
          pageNum: 1,
          pageSize: 999999
        }
      }).then(res => {
        if (res.code == 0) {
          let regx = /<[^>]+>|&[^>]+;/g;
          this.moreList = res.data
          this.moreList.forEach(i => {
            i.contentAll = i.content;
            i.content = i.content.replaceAll(regx,'');
            i.updateDate = i.updateDate.slice(0, 10)
          })
        }
      })
    },
    // 首页 1  政策资讯2  专业解读 3  院校介绍 4
    getBannerFn () {
      this.$api.queryBanner({ type: this.$constants.bannerTypes.policy }).then(res => {
        if (![0, 200].includes(res.code)) {
          return this.$message.error(res.msg)
        }
        this.bannerImg = res.data[0].image
      })
    },
  },

}
</script>

<style scoped lang="stylus">
introSectionWidth = 1440px
.policy-container {
  width: 100%;
  background: #F9F9F9;
  .m-l-20 {
    margin-left: 20px;
  }
  .m-l-10 {
    margin-left: 10px;
  }
  .list-container {
    width: introSectionWidth;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items flex-start
    background: #fff;
  }
  .policy-title {
    position: relative;
    width: 100%;
    .bg-policy {
      display: block;
      width: 100%;
      height: auto;
      min-height: 195px;
    }
    .title {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -43px;
      margin-left: -100px;
      z-index: 1;
      width: 200px;
      height: 86px;
      font-size: 50px;
      //font-weight: PingFangMedium600;
      color: #FFFFFF;
      line-height: 86px;
      text-shadow: 0 4px 4px rgba(121,68,2,0.1);
    }
  }

  .tab {
    display: flex;
    justify-content: flex-start;
    border-bottom: 2px solid #FC6621;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    .tab-child {
      width: 98px;
      heihgt: 40px;
      color: #666666;
      cursor: pointer;
    }
    .tab-active {
      width: 98px;
      heihgt: 40px;
      color: #fff;
      background: #FC6621;
      border-radius: 6px 6px 0 0;
    }
    .more-icon {
      margin-right: 5px;
      font-size: 18px;
      font-weight: 600;
      color: #FC6621;
    }
  }

  .time {
    min-width 60px
    font-size: 16px;
    color: #666666;
    line-height: 26px;
  }
  .list-section {
    display: flex;
    align-items flex-start
    background: #fff;
  }
  .policy-content {
    flex 7.5
    margin: 12px auto;
    padding: 20px 22px;
    .policy-list {
      flex 8
      margin: auto;
      padding: 10px 0;
      .list-item {
        display: flex;
        align-items: center;
      }
      .article-cover {
        display: block;
        width: 178px;
        height: 100px;
        border-radius: 4px;
      }
      .article-content {
        flex: 6;
        padding: 6px 0 6px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          line-height: 28px;
          cursor: pointer;
          ellipsis()
        }
        .desc {
          width: 100%;
          height: 54px;
          font-size: 15px;
          color: #666666;
          line-height: 26px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  .more-list {
    flex: 2.5;
    margin: 12px auto;
    padding: 20px 22px;
    .more-content {
      padding: 14px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .more-item {
        display flex
        align-items center
        justify-content flex-start
        cursor pointer
      }
      .more-item-title {
        font-size: 15px;
        color: #333;
        font-weight 600
        line-height: 26px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
  }
}
</style>
